<template>
  <div>
    <div ref="lrcBox" class="lrc-container">
      <div
        @click="getClickTime(item.time)"
        :class="{active:activeIndex == index && isHaveTime}"
        v-for="(item,index) in lrcList"
        :key="index"
      >{{item.lyric}}</div>
    </div>
  </div>
</template>

<script>
import { getMusicLRC } from "@api/music-api";
import { mapState } from "vuex";
import { CHANGE_PROCESS } from "../constant/vuex-mutation";
export default {
  created() {
    getMusicLRC(this.songId).then(res => {
      // 对于数据的处理
      // 字符串处理成什么形式的数据。
      // 整个字符串处理成一个列表数据。列表中的每一项
      //    1. 包含我们这行歌词的内容
      //    2. 包含这一行歌词的时间

      let lrcList = [];
      // 字符串拆分成数组。 1,2,3,4  [1,2,3,4]
      const lineList = res.lrcContent.split("\n");

      // 判断一下，我们这次请求到的歌词有没有给我们提供时间
      // 通过正则表达式，匹配前面的时间。[00:08.27]
      const reg = /\[\d*:\d*\.\d*\]/g;

      if (!res.lrcContent.match(reg)) {
        console.log("代表歌词中没有时间");
        this.isHaveTime = false;
        lrcList = lineList.map(item => {
          return {
            time: -1,
            lyric: item
          };
        });
        this.lrcList = lrcList;
        return;
      }

      // 之后需要把时间和歌词的内容分开

      for (let line of lineList) {
        // line代表列表的每一行
        const lineMatchList = line.match(reg);
        if (!lineMatchList) continue;
        for (let time of lineMatchList) {
          // 匹配到几个时间就应该在数组中放几个数据
          // 现在的time是   [02:46.67]
          const minReg = /\[\d*/; // 正则匹配到分钟
          const minMatch = time.match(minReg); // 是一个对象结构内容
          const minStr = String(minMatch); // 转换成字符串类型 [02
          const minReloveStr = minStr.slice(1); // 02 字符串
          const min = Number(minReloveStr); // 把02 转化成了 2数字
          // const min = Number(String(time.match(minReg)).slice(1));
          const sec = Number(String(time.match(/:\d*/)).slice(1));
          const finalTime = min * 60 + sec;
          // 处理歌词数据
          const lyric = line.replace(reg, "");
          // 现在的line是   [02:46.67]就在那一瞬间
          lrcList.push({
            time: finalTime,
            lyric
          });
        }
      }
      // 能拿到我们想要的歌词的数组了
      // 需要对列表，按照时间进行排序
      for (let i = 0; i < lrcList.length; i++) {
        for (let j = 0; j < lrcList.length - 1 - i; j++) {
          if (lrcList[j].time > lrcList[j + 1].time) {
            let obj = lrcList[j];
            lrcList[j] = lrcList[j + 1];
            lrcList[j + 1] = obj;
          }
        }
      }
      console.log(lrcList);

      this.lrcList = lrcList;
    });
  },
  mounted() {
    this.$refs.lrcBox.addEventListener("touchmove", () => {
      clearTimeout(this.timeout);
      this.isCanScroll = false;
    });
    this.$refs.lrcBox.addEventListener("touchend", () => {
      // console.log("touchend");

      this.timeout = setTimeout(() => {
        this.isCanScroll = true;
      }, 2000);
    });
  },
  data() {
    return {
      lrcList: [],
      activeIndex: 0,
      isCanScroll: true,
      timeout: null,
      isHaveTime: true // 默认有时间参数的
    };
  },
  computed: {
    ...mapState(["currentTime"])
  },
  props: {
    songId: [String, Number]
  },
  watch: {
    currentTime() {
      if(!this.isHaveTime){
        return;
      }
      // 每次进度变化会触发这个函数
      // 每次变化后，更新激活的样式
      for (let i = 1; i < this.lrcList.length; i++) {
        if (this.currentTime < this.lrcList[i].time) {
          this.activeIndex = i - 1;
          // 设置我们激活的歌词显示在中间
          // 可以通过调整容器的滚动的高度的方式，调整它的位置。
          // 需要知道调整的数值是多少？
          if (this.isCanScroll) {
            this.$refs.lrcBox.scrollTop =
              this.$refs.lrcBox.children[this.activeIndex].offsetTop - 70;
          }
          break;
        }
      }
    }
  },
  methods: {
    getClickTime(time) {
      console.log(time);
      // this.$emit("changeTime", time);
      this.$store.commit(CHANGE_PROCESS, { process: time });
    }
  }
  // 进度每次变化的时候，都去修改歌词激活的行数，并且保证激活的行数是屏幕的中间
  // 给激活的歌词的行数显示不同的样式的话
  // 1. 知道激活哪一行, 设置了一个activeIndex属性，这个属性就是激活歌词一个索引
  // 2. 每次播放进度变化的时候，修改这个索引，让当前激活的歌词就是我们正在播放的位置

  // touchmove \ touchstart \ touchend
};
</script>

<style lang="less" scoped>
.lrc-container {
  height: 180px;
  overflow: scroll;
  text-align: center;
  position: relative;
}
.active {
  color: red;
}
</style>